<script setup lang="ts">

import {onMounted, ref} from "vue";
import {Department, Student} from "../../types";
import {addDepartment, deleteDepartment, getDepList, updateDepartment} from "../../apis/DepartmentApi.ts";
import {ElMessage} from "element-plus";
import StudentForm from "../../components/StudentForm.vue";

const depList = ref<Array<Department>>()
const showForm = ref(false)
const dialogForm = ref<Department>()
const isUpdate = ref(false)

const getDep = async () => {
  let res = await getDepList();
  if (res.flag){
      depList.value = res.data
  }else {
      ElMessage.error(res.msg)
  }
}
const openForm = (type:string,obj?:Department) => {
    showForm.value = true
    if (type === 'add'){
        isUpdate.value = false
        dialogForm.value = {}
    }
    if (type === 'update'){
        isUpdate.value = true
        console.log('update dialogForm',obj)
        dialogForm.value = JSON.parse(JSON.stringify(obj))
    }
}

const deleteRow = async (row:Department) => {
    console.log('delete row',row)
    let res = await deleteDepartment(row.id)
    if (res.flag){
        ElMessage.success(res.msg)
        await getDep()
    }else {
        ElMessage.error(res.msg)
    }
}
const submitDialog = async () => {
    if (isUpdate.value){
        let res = await updateDepartment(dialogForm.value)
        if (res.flag){
            ElMessage.success(res.msg)
            showForm.value = false
            await getDep()
        }else {
            ElMessage.error(res.msg)
        }
    }else {
        let res = await addDepartment(dialogForm.value)
        if (res.flag){
            await getDep()
            showForm.value = false
        }else {
            ElMessage.error(res.msg)
        }

    }
}

onMounted(async () => {
    await getDep();
})
</script>

<template>

    <el-row :gutter="20">
        <el-col :span="16">
            <el-button type="primary"  @click="openForm('add')">添加学院</el-button>
        </el-col>
        <el-col :span="8">

        </el-col>
    </el-row>
    <br>

    <div class="table-container ">
        <el-table :data="depList" stripe class="stu-table" border >
            <el-table-column prop="id" label="ID" width="140" />
            <el-table-column prop="name" label="学院名称" width="220" />
            <el-table-column prop="description" label="简介" width="380" />
            <el-table-column label="操作" width="160" fixed="right">
                <template #default="scope">
                    <el-button type="primary"   @click="openForm('update',scope.row)">编辑</el-button>
                    <el-popconfirm title="确认删除？" @confirm="deleteRow(scope.row)">
                        <template #reference>
                            <el-button type="danger"  >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="showForm" v-if="showForm" title="修改学院信息" width="400">
        <el-form :model="dialogForm">
            <el-form-item label="id" >
                <p>{{dialogForm.id}}</p>
            </el-form-item>
            <el-form-item label="学院名称" >
                <el-input v-model="dialogForm.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="学院简介" >
                <el-input type="textarea" :rows="3" v-model="dialogForm.description" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showForm = false">取 消</el-button>
                <el-button type="primary" @click="submitDialog">确 定</el-button>
            </span>
        </template>
    </el-dialog>


</template>

<style scoped>
.stu-table{
    width: 100%;
    overflow: auto;
}
.table-container {
    width: max-content; /* 或者 fit-content, 使容器仅包裹内容 */
    display: inline-block; /* 使容器能够收缩至内容宽度 */
    overflow-x: auto; /* 添加滚动条，以防内容超出可视区域 */
    margin: 0 auto;
}
</style>